// 颜色盒公共样式
%common {
  width: 200px;
  height: 100px;
}

// 最外面的大盒子
.color_box {
  margin: auto;
  @extend %common;
  // width: 200px;
  // height: 100px;
  border: solid 1px black;
  overflow: hidden;
  position: relative;
  text-align: center;
  line-height: 100px;
  // 三个颜色盒的父辈
  .swper {
    width: 600px;
    height: 100%;
    display: flex;
    position: relative;
    animation: move 3s infinite alternate ease-in-out;
    // 蓝色盒
    .blue {
      @extend %common;
      background-color: blue;
    }
    // 红色盒
    .red {
      @extend %common;
      background-color: red;
    }
    // 绿色盒
    .green {
      @extend %common;
      background-color: green;
    }
  }
}

@keyframes move {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-200px);
  }
  100% {
    transform: translateX(-400px);
  }
}
